<template>
    <div class="wrapper">
        <ul class="header">
            <li
                :class="{ active: authType === '1' }"
                @click="authType = '1'"
            >
                个人授权
            </li>
            <li
                :class="{ active: authType === '2' }"
                @click="authType = '2'"
            >
                企业授权
            </li>
        </ul>
        <div class="content-wrapper">
            <ul class="content">
                <li class="full">
                    <div
                        v-if="loading"
                        class="loading"
                    >
                        <i class="iconfont icon-loading"></i>
                        <p>加载中...</p>
                    </div>
                    <div v-else>
                        <div
                            v-if="validArray.length === 0 && invalidArray.length === 0"
                            class="auth-empty"
                        >
                            <img
                                src="../../assets/images/auth-empty.png"
                                alt=""
                            />
                            <p>您还未进行过授权</p>
                        </div>
                        <div v-else>
                            <div
                                v-show="validArray.length > 0"
                                class="title"
                            >
                                <div class="border bg-018CFF"></div>
                                <div>有效</div>
                            </div>
                            <AuthList
                                :data="validArray"
                                valid
                            />
                            <div
                                v-show="invalidArray.length > 0"
                                class="title"
                            >
                                <div class="border bg-FABA1F"></div>
                                <div>失效</div>
                            </div>
                            <AuthList :data="invalidArray" />
                        </div>
                    </div>
                </li>
            </ul>
            <!-- <div class="footer">
                <Button
                    :loading="submitLoading"
                    :disabled="!canSubmit"
                    @click="handleSubmit">
                    确定
                </Button>
            </div> -->
        </div>
    </div>
</template>

<script>
import AuthList from './AuthList';
import { restful_api } from '@/api';
export default {
    name: 'Authorization',
    components: { AuthList },
    data() {
        return {
            authType: '1',
            loading: true,
            buff: {},

            validArray: [],
            invalidArray: [],
        };
    },
    watch: {
        authType(val) {
            this.getData(val);
        },
    },
    created() {
        document.title = '我的授权';
    },
    mounted() {
        this.main();
    },
    methods: {
        async getData(authType) {
            if (!this.buff[authType]) {
                let data = {
                    methodId: 'TP350005',
                    params: {
                        authType,
                        certCode: this.mztUser.cardNum,
                    },
                };

                this.loading = true;
                this.buff[authType] = await restful_api(data);
            }

            this.validArray = this.buff[authType].validArray;
            this.invalidArray = this.buff[authType].invalidArray;
            this.loading = false;
        },
        main() {
            this.getData(this.authType);
        },
        handleTo(nav, authId) {
            this.$router.push({ path: nav, query: { authId } });
        },
    },
};
</script>
<style scoped>
.bg-018CFF {
    background-color: #018cff;
}
.bg-FABA1F {
    background-color: #faba1f;
}
.wrapper {
    background: #f5f5f5 url('../../assets/images/background.png') no-repeat;
    background-size: 100% auto;
}
.header {
    display: flex;
    margin: 32px 16px 0;
    color: #ffffff80;
    font-size: 18px;
    text-align: center;
}
.header li {
    flex: 1;
}
.header li.active {
    position: relative;
    color: #fff;
}
.header li.active::after {
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 2em;
    height: 2px;
    border-radius: 2px;
    margin-left: -1em;
    /* border: solid thin #FFF; */
    background-color: #fff;
    content: '';
}
.content-wrapper {
    position: fixed;
    top: 84px;
    bottom: 0;
    width: 100vw;
    overflow-y: scroll;
}
.content {
    display: flex;
    flex-direction: column;
    margin: 0 16px;
    min-height: 100%;
}
.content > li {
    min-height: 100%;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #fff;
    box-shadow: 0px 2px 15px 5px #00000012;
    overflow: hidden;
}
.content > li:last-child {
    margin-bottom: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.content > li.full {
    flex: 1;
}
.content .loading,
.content .auth-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40%;
    line-height: 32px;
    color: #666;
}
.content .title {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
}
.content .title .border {
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
}
</style>
